<template>
  <view
    :class="`${ns.b()} ${customClass}`"
    :style="customStyle"
    @click="handleClick"
  >
    <view :class="`${ns.e('body')} ${active ? 'is-active' : 'is-inactive'}`">
      <slot
        name="icon"
        :active="active"
        :class="`${ns.e('body-icon')}`"
      ></slot>
      <template v-if="!$slots.icon && !!icon">
        <uni-icons
          :type="icon"
          :class="`${ns.e('body-icon')}}`"
        ></uni-icons>
      </template>
      <text
        v-if="!!title"
        :style="textStyle"
        :class="`${ns.e('body-title')}`"
      >
        {{ title }}
      </text>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script lang="ts" setup>
import { isNil } from "ramda";
import { computed } from "vue";
import { useParent, useNamespace } from "@/use";
import { TABBAR_KEY } from "../tabbar/i-biz-tabbar";
import { tabbarItemProps } from "./i-biz-tabbar-item";

const ns = useNamespace("tabbar-item");
const props = defineProps(tabbarItemProps);
const { parent: tabbar, index } = useParent(TABBAR_KEY);

const active = computed(() => {
  const name = !isNil(props.name) ? props.name : index.value;
  if (tabbar) {
    if (tabbar.props.modelValue === name) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
});

const textStyle = computed(() => {
  if (!tabbar) {
    return "";
  }
  return `color: ${
    active.value ? tabbar.props.activeColor : tabbar.props.inactiveColor
  }`;
});

const handleClick = () => {
  const name: string | number = !isNil(props.name) ? props.name : index.value;
  tabbar && tabbar.setChange({ name });
};
</script>
<style lang="scss" scoped>
@include b(tabbar-item) {
  flex: 1;
  text-align: center;
  text-decoration: none;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  @include e(body) {
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: 1;
    padding: 0;
    position: relative;

    @include when(active) {
        // color: getCssVar(color, primary, active, text);
        color: #4d80f0;
      }
  }

  @include e(body-title) {
    font-size: getCssVar(font-size, small);
    line-height: initial;
  }

  @include e(body-icon) {
    font-size: getCssVar(font-size, header-5);
  }
}
</style>
